<template>
    <el-dialog title="拍照上传" :visible.sync="visible" width="1065px">
        <div class="box">
            <video id="videoCamera" class="canvas" :width="videoWidth" :height="videoHeight" autoPlay></video>
            <canvas id="canvasCamera" class="canvas" :width="videoWidth" :height="videoHeight"></canvas>
        </div>
        <div slot="footer" style="display: flex">
            <el-upload
                :action="$base.url + 'file/upload'"
                :on-success="uploadSuccess"
                :show-file-list="false"
                accept=".jpg,.png,.jpge"
                style="margin-right: 10px"
            >
                <el-button icon="el-icon-upload2" size="small"> 上传图片 </el-button>
            </el-upload>

            <el-button @click="drawImage" icon="el-icon-camera" size="small"> 拍照 </el-button>
            <el-button v-if="os" @click="getCompetence" icon="el-icon-video-camera" size="small"> 打开摄像头 </el-button>
            <el-button v-else @click="stopNavigator" icon="el-icon-switch-button" size="small"> 关闭摄像头 </el-button>
            <el-button @click="resetCanvas" icon="el-icon-refresh" size="small"> 重置 </el-button>
            <el-button @click="onCancel" icon="el-icon-circle-close" size="small"> 完成 </el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: 'XXX',
    data() {
        return {
            baseUrl: `/${this.$base.name}/`,
            visible: false, //弹窗
            loading: false, //上传按钮加载
            os: false, //控制摄像头开关
            thisVideo: null,
            thisContext: null,
            thisCancas: null,
            videoWidth: 500,
            videoHeight: 400,
            postOptions: [],
            CertCtl: '',
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 项目人员表格数据
            akworkerList: [],
            //工种类别数据字典
            workerTypeOptions: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                imgSrc: undefined,
            },
            // 表单参数

            form: {},

            // 表单校验

            rules: {},
        };
    },

    created() {
        // this.onTake()
    },

    methods: {
        /*调用摄像头拍照开始*/

        onTake() {
            this.visible = true;

            this.getCompetence();
        },

        onCancel() {
            this.uploadImg();
            this.visible = false;
            /* this.resetCanvas();*/

            this.stopNavigator();
        },
        uploadSuccess(e) {
            this.visible = false;
            this.$emit('imgChange', e.file);
        },
        uploadImg() {
            let param = new FormData();
            param.append('file', this.base64toFile(this.imgSrc));
            this.$http.post('file/upload', param).then(res => {
                this.$emit('imgChange', res.data.file);
            });
        },
        base64toFile(dataurl, filename = 'file') {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let suffix = mime.split('/')[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            let file = new File([u8arr], `${filename}.${suffix}`, {
                type: mime,
            });
            return file;
        },
        // 调用摄像头权限

        getCompetence() {
            //必须在model中render后才可获取到dom节点,直接获取无法获取到model中的dom节点

            this.$nextTick(() => {
                const _this = this;

                this.os = false; //切换成关闭摄像头

                this.thisCancas = document.getElementById('canvasCamera');

                this.thisContext = this.thisCancas.getContext('2d');

                this.thisVideo = document.getElementById('videoCamera');

                // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象

                if (navigator.mediaDevices === undefined) {
                    navigator.menavigatordiaDevices = {};
                }

                // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象

                // 使用getUserMedia，因为它会覆盖现有的属性。

                // 这里，如果缺少getUserMedia属性，就添加它。

                if (navigator.mediaDevices.getUserMedia === undefined) {
                    navigator.mediaDevices.getUserMedia = function (constraints) {
                        // 首先获取现存的getUserMedia(如果存在)

                        let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;

                        // 有些浏览器不支持，会返回错误信息

                        // 保持接口一致

                        if (!getUserMedia) {
                            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                        }

                        // 否则，使用Promise将调用包装到旧的navigator.getUserMedia

                        return new Promise(function (resolve, reject) {
                            getUserMedia.call(navigator, constraints, resolve, reject);
                        });
                    };
                }

                const constraints = {
                    audio: false,

                    video: {
                        width: _this.videoWidth,
                        height: _this.videoHeight,
                        transform: 'scaleX(-1)',
                    },
                };

                navigator.mediaDevices
                    .getUserMedia(constraints)
                    .then(function (stream) {
                        // 旧的浏览器可能没有srcObject

                        if ('srcObject' in _this.thisVideo) {
                            _this.thisVideo.srcObject = stream;
                        } else {
                            // 避免在新的浏览器中使用它，因为它正在被弃用。

                            _this.thisVideo.src = window.URL.createObjectURL(stream);
                        }

                        _this.thisVideo.onloadedmetadata = function (e) {
                            _this.thisVideo.play();
                        };
                    })
                    .catch(err => {
                        this.$notify({
                            title: '警告',

                            message: '没有开启摄像头权限或浏览器版本不兼容.',

                            type: 'warning',
                        });
                    });
            });
        },

        //绘制图片

        drawImage() {
            // 点击，canvas画图

            this.thisContext.drawImage(this.thisVideo, 0, 0, this.videoWidth, this.videoHeight);

            // 获取图片base64链接

            this.imgSrc = this.thisCancas.toDataURL('image/png');

            /*const imgSrc=this.imgSrc;*/
        },

        //清空画布

        clearCanvas(id) {
            let c = document.getElementById(id);

            let cxt = c.getContext('2d');

            cxt.clearRect(0, 0, c.width, c.height);
        },

        //重置画布

        resetCanvas() {
            this.imgSrc = '';

            this.clearCanvas('canvasCamera');
        },

        //关闭摄像头

        stopNavigator() {
            if (this.thisVideo && this.thisVideo !== null) {
                this.thisVideo.srcObject.getTracks()[0].stop();

                this.os = true; //切换成打开摄像头
            }
        },

        /*调用摄像头拍照结束*/
    },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #ccc;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
